<%@ page import="java.util.*" pageEncoding="utf-8" %>
<%@include file="/commons/taglibs.jsp" %>
<!DOCTYPE html>
<html>
<fmt:bundle basename="res">
<head>
    <meta charset="utf-8">
    <title><fmt:message key='ggxq'/></title>
    <jsp:include page="/WEB-INF/commons/commons-header.jsp" flush="true"/>
    <style>
        html {
            background: #fff;
        }
    </style>
</head>

<body>

<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
    <div class="layui-tab-content" style="height: 100%;">
        <div class="layui-tab-item layui-show">
            <div class="layui-container">
                <div class="layui-form" lay-filter="layuiadmin-app-form-list" id="layuiadmin-app-form-list" style="padding: 20px 30px 0 0;">
                    <form:form commandName="advertis" method="post">

                        <form:hidden path="id"/>
                        <input type="hidden" name="_method" value="${_method}">

                        <div class="layui-form-item">
                            <label class="layui-form-label"><span style="color: red;">*</span><fmt:message key='ptlx'/></label>
                            <div class="layui-input-inline" style="width: 70%;">
                                <input type="radio" lay-verify="required" lay-filter="platformType" name="platformType" value="0"
                                       <c:if test="${advertis.platformType == 0}">checked</c:if> title="<fmt:message key='yhscd'/>">
                                <input type="radio" lay-verify="required" lay-filter="platformType" name="platformType" value="1"
                                       <c:if test="${advertis.platformType == 1}">checked</c:if> title="<fmt:message key='sjcgd'/>">
                            </div>
                        </div>


                        <div class="layui-form-item">
                            <label class="layui-form-label"><span style="color: red;">*</span><fmt:message key='ggwz'/></label>
                            <div class="layui-input-inline" style="width: 70%;">
                                <input type="radio" lay-verify="required" name="position" value="1" checked title="<fmt:message key='syhbt'/>">
                                <input type="radio" lay-verify="required" name="position" value="2" <c:if test="${advertis.position == 2}">checked</c:if> title="<fmt:message key='sytlgg'/>">
                                <input type="radio" lay-verify="required" name="position" value="3" <c:if test="${advertis.position == 3}">checked</c:if> title="<fmt:message key='syxgg'/>">
                                <input type="radio" lay-verify="required" name="position" value="4" <c:if test="${advertis.position == 4}">checked</c:if> title="<fmt:message key='spzfcgy'/>">

                                <div id="isMerchantArea" >
                                    <input type="radio" lay-verify="required" name="position" value="5" <c:if test="${advertis.position == 5}">checked</c:if> title="<fmt:message key='ljzz'/>">
                                    <input type="radio" lay-verify="required" name="position" value="6" <c:if test="${advertis.position == 6}">checked</c:if> title="<fmt:message key='mshd'/>">
                                    <input type="radio" lay-verify="required" name="position" value="7" <c:if test="${advertis.position == 7}">checked</c:if> title="<fmt:message key='tjhd'/>">
                                    <input type="radio" lay-verify="required" name="position" value="8" <c:if test="${advertis.position == 8}">checked</c:if> title="<fmt:message key='yshd'/>">
                                    <input type="radio" lay-verify="required" name="position" value="9" <c:if test="${advertis.position == 9}">checked</c:if> title="<fmt:message key='pthd'/>">
                                </div>

                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label"><span style="color: red;">*</span>fmt:message key='ggmc'/></label>
                            <div class="layui-input-inline" style="width: 70%">
                                <form:input class="layui-input" lay-verify="required" path="name"/>
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label"><b style="color:red">*</b> <fmt:message key='ggtp'/></label>
                            <div class="layui-input-inline" style="width: 70%;">
                                <form:hidden path="image" lay-verify="required"/>
                                <a type="button" id="chooseImage" class="layui-btn layui-btn-sm layui-btn-normal"><fmt:message key='sctp'/></a>
                                <div id="imageBox">
                                    <c:if test="${not empty advertis.image}">
                                        <img class="preview" src="${store_domain}/uploads/${advertis.image}" style="width:120px;height:120px;margin-top:10px;">
                                    </c:if>
                                    <c:if test="${empty advertis.image}">
                                        <img src="${web_domain}/resources/images/default.jpeg" style="width:120px;height:120px;margin-top:10px;">
                                    </c:if>
                                </div>
                            </div>
                        </div>


                        <div class="layui-form-item">
                            <label class="layui-form-label"><span style="color: red;">*</span><fmt:message key='pxz'/></label>
                            <div class="layui-input-inline" style="width: 70%">
                                <form:input class="layui-input" lay-verify="required|number" path="rank"/>
                            </div>
                        </div>


                        <div class="layui-form-item inner" id="innerLinkType">
                            <label class="layui-form-label"><span style="color: red;">*</span><fmt:message key='nllx'/></label>
                            <div class="layui-input-inline" style="width: 70%">
                                <input type="radio" name="innerLinkType" lay-filter="innerLinkType" value="1" checked title="<fmt:message key='sp'/>">
                                <input type="radio" name="innerLinkType" lay-filter="innerLinkType" value="3" <c:if test="${advertis.innerLinkType == 3}">checked</c:if> title="<fmt:message key='ssjgy'/>">
                                <input type="radio" name="innerLinkType" lay-filter="innerLinkType" value="4" <c:if test="${advertis.innerLinkType == 4}">checked</c:if> title="<fmt:message key='zt1'/>">
                                <input type="radio" name="innerLinkType" lay-filter="innerLinkType" value="5" <c:if test="${advertis.innerLinkType == 5}">checked</c:if> title="<fmt:message key='sy'/>">
                                <input type="radio" name="innerLinkType" lay-filter="innerLinkType" value="6" <c:if test="${advertis.innerLinkType == 6}">checked</c:if> title="<fmt:message key='ljzxy'/>">
                                <input type="radio" name="innerLinkType" lay-filter="innerLinkType" value="7" <c:if test="${advertis.innerLinkType == 7}">checked</c:if> title="<fmt:message key='gwcy'/>">
                                <input type="radio" name="innerLinkType" lay-filter="innerLinkType" value="8" <c:if test="${advertis.innerLinkType == 8}">checked</c:if> title="<fmt:message key='tjyhlby'/>">
                                <input type="radio" name="innerLinkType" lay-filter="innerLinkType" value="9" <c:if test="${advertis.innerLinkType == 9}">checked</c:if> title="<fmt:message key='fxssqy'/>">
                                <input type="radio" name="innerLinkType" lay-filter="innerLinkType" value="10" <c:if test="${advertis.innerLinkType == 10}">checked</c:if> title="<fmt:message key='mslby'/>">
                                <input type="radio" name="innerLinkType" lay-filter="innerLinkType" value="11" <c:if test="${advertis.innerLinkType == 11}">checked</c:if> title="<fmt:message key='sjrzy'/>">
                                <input type="radio" name="innerLinkType" lay-filter="innerLinkType" value="12" <c:if test="${advertis.innerLinkType == 12}">checked</c:if> title="<fmt:message key='splm'/>">
                                <input type="radio" name="innerLinkType" lay-filter="innerLinkType" value="13" <c:if test="${advertis.innerLinkType == 13}">checked</c:if> title="<fmt:message key='gwkzxy'/>">
                                <input type="radio" name="innerLinkType" lay-filter="innerLinkType" value="14" <c:if test="${advertis.innerLinkType == 14}">checked</c:if> title="<fmt:message key='ptlby'/>">
                                <input type="radio" name="innerLinkType" lay-filter="innerLinkType" value="15" <c:if test="${advertis.innerLinkType == 15}">checked</c:if> title="<fmt:message key='yszqlby'/>">
                            </div>
                        </div>

                        <c:if test="${advertis.innerLinkType == 1 || advertis.innerLinkType == 0}">
                            <div class="layui-form-item inner inner1" id="selectShop">
                                <label class="layui-form-label"></label>
                                <div class="layui-input-inline" style="width: 70%">
                                    <input type="button" class="layui-btn" id="select-goods" value="<fmt:message key='xzsp'/>"/>
                                    <form:hidden path="innerLinkId"/>
                                    <form:hidden path="innerLinkName"/>
                                </div>
                            </div>

                            <div class="layui-form-item select-line">
                                <label class="layui-form-label"><fmt:message key='yxzsp'/></label>
                                <div class="layui-input-block" style="line-height: 38px;">${advertis.innerLinkName}</div>
                            </div>
                        </c:if>

                        <c:if test="${advertis.innerLinkType == 3}">
                            <div class="layui-form-item inner inner3">
                                <label class="layui-form-label"><span style="color: red;">*</span><fmt:message key='ssgjz'/></label>
                                <div class="layui-input-inline" style="width: 70%">
                                    <input class="layui-input" name="innerLinkKeyword" value="${advertis.innerLinkKeyword}"/>
                                </div>
                            </div>
                        </c:if>

                        <c:if test="${advertis.innerLinkType == 4}">
                            <div class="layui-form-item inner inner4">
                                <label class="layui-form-label"></label>
                                <div class="layui-input-inline" style="width: 70%">
                                    <input type="button" class="layui-btn" id="select-subject" value="<fmt:message key='xzzt'/>"/>
                                    <form:hidden path="subjectId"/>
                                    <input type="hidden" name="innerLinkName" id="innerLinkName" value="${advertis.innerLinkName}">
                                </div>
                            </div>
                            <div class="layui-form-item select-line">
                                <label class="layui-form-label"><fmt:message key='yxzzt'/></label>
                                <div class="layui-input-block" style="line-height: 38px;">${advertis.innerLinkName}</div>
                            </div>
                        </c:if>

                        <c:if test="${advertis.innerLinkType == 12}">
                            <div class="layui-form-item inner inner12">
                                <label class="layui-form-label"></label>
                                <div class="layui-input-inline" style="width: 70%">
                                    <input type="button" class="layui-btn" id="select-channel" value="<fmt:message key='xzlm'/>"/>
                                    <form:hidden path="channelId"/>
                                    <input type="hidden" id="channelLevel" name="channelLevel" value="${advertis.channelLevel}">
                                    <input type="hidden" id="innerLinkName" name="innerLinkName" value="${advertis.innerLinkName}">
                                </div>
                            </div>
                            <div class="layui-form-item select-line">
                                <label class="layui-form-label"><fmt:message key='yxzlm'/></label>
                                <div class="layui-input-block" style="line-height: 38px;">${advertis.innerLinkName}</div>
                            </div>
                        </c:if>

                        <div class="layui-form-item confirm-line">
                            <label class="layui-form-label"></label>
                            <div class="layui-input-inline">
                                <input type="button" style="display: none;" value="确定" id="submit" lay-filter="submit" lay-submit class="layui-btn">
                            </div>
                        </div>
                    </form:form>
                </div>
            </div>
        </div>

    </div>
</div>


<div style="display: none;">
    <form action="${web_domain}/upload/image" method="post" id="uploadImage" enctype="multipart/form-data">
        <input id="uploadImageFile" name="file" type="file" accept="image/*"/>
    </form>
</div>

<script>

    layui.use(['form', 'laydate'], function () {
        var form = layui.form;

        //运费方式设置
        form.on('radio(platformType)', function (data) {
            var id = data.value;

            if (id == 0) {
                $("#isMerchantArea").show();
            }

            if (id == 1) {
                $("#isMerchantArea").hide();
            }

        });

        $("#chooseImage").click(function () {
            $("#uploadImageFile").click();
        });

        $("#uploadImageFile").change(function () {
            $("#uploadImage").ajaxSubmit({
                dataType: "JSON",
                success: function (result) {
                    if (result.status) {
                        $("#image").attr("value", result.path);
                        $("#imageBox").html("<img class='preview' src='${store_domain}/uploads/" + result.path + "' style='width:120px;height:120px;margin-top:10px;' />'");
                    }
                },
                error: function (result) {
                    console.log(result.responseText);
                }
            });
        });


        /**
         * 选择商品
         */
        $(document).on("click", "#select-goods", function () {
            layer.open({
                type: 2,
                title: "<fmt:message key='xzsp'/>",
                content: "${web_domain}/mall/advertis/chooseGoods?isSupplier=" + $("input[name='platformType']:checked").val(),
                area: ["90%", "90%"],
                btn: ["<fmt:message key='qd'/>", "<fmt:message key='qx'/>"],
                yes: function (index, layero) {

                    var checkbox = layero.find('iframe').contents().find("input[type=checkbox]:checked")[0];
                    $("#innerLinkId").val(checkbox.value);

                    var name = checkbox.getAttribute("data-name");
                    $("#innerLinkName").val(name);

                    $(".select-line").remove();

                    $(".confirm-line").before('<div class="layui-form-item select-line">\n' +
                        '                            <label for="" class="layui-form-label"><fmt:message key='yxzsp'/></label>\n' +
                        '                            <div class="layui-input-block" style="line-height: 38px;">' + name + '</div>\n' +
                        '                        </div>');
                    layer.close(index);
                }
            });
        });

        $(document).on("click", "#select-subject", function () {
            layer.open({
                type: 2,
                title: "<fmt:message key='xzzt'/>",
                content: "${web_domain}/mall/advertis/chooseSubject",
                area: ["90%", "90%"],
                btn: ["<fmt:message key='qd'/>", "<fmt:message key='qx'/>"],
                yes: function (index, layero) {
                    var checkbox = layero.find('iframe').contents().find("input[type=checkbox]:checked")[0];
                    $("#subjectId").val(checkbox.value);
                    var name = checkbox.getAttribute("data-name");
                    $("#innerLinkName").val(name);
                    $(".select-line").remove();
                    $(".confirm-line").before('<div class="layui-form-item select-line">\n' +
                        '                            <label class="layui-form-label"><fmt:message key='yxzzt'/></label>\n' +
                        '                            <div class="layui-input-block" style="line-height: 38px;">' + name + '</div>\n' +
                        '                        </div>');
                    layer.close(index);
                }
            });
        });

        $(document).on("click", "#select-channel", function () {
            layer.open({
                type: 2,
                title: "<fmt:message key='xzlm'/>",
                content: "${web_domain}/mall/advertis/chooseChannel",
                area: ["90%", "90%"],
                btn: ["<fmt:message key='qd'/>", "<fmt:message key='qx'/>"],
                yes: function (index, layero) {
                    var checkbox = layero.find('iframe').contents().find("input[type=checkbox]:checked")[0];
                    $("#innerLinkId").val(checkbox.value);
                    $("#channelId").val(checkbox.value);

                    var name = checkbox.getAttribute("data-name");
                    $("#innerLinkName").val(name);

                    var level = checkbox.getAttribute("data-level");
                    $("#channelLevel").val(level);

                    $(".select-line").remove();
                    $(".confirm-line").before('<div class="layui-form-item select-line">\n' +
                        '                            <label for="" class="layui-form-label"><fmt:message key='yxzlm'/></label>\n' +
                        '                            <div class="layui-input-block" style="line-height: 38px;">' + name + '</div>\n' +
                        '                        </div>');



                    layer.close(index);
                }
            });
        });

        //内链类型选择
        form.on('radio(innerLinkType)', function (data) {

            if (data.value == 1) {
                if ($(".inner1").length > 0) {
                    return;
                }
                //商品
                $(".inner3, .inner4, .inner12").remove();
                $(".select-line").remove();
                $("#innerLinkType").after(' <div class="layui-form-item inner inner1">\n' +
                    '                                    <label for="" class="layui-form-label"></label>\n' +
                    '                                    <div class="layui-input-inline" style="width: 70%">\n' +
                    '                                        <input type="button" class="layui-btn" id="select-goods" value="<fmt:message key='xzsp'/>"/>\n' +
                    '                                        <input type="hidden" id="innerLinkId" name="innerLinkId">\n' +
                    '                                        <input type="hidden" id="innerLinkName" name="innerLinkName">\n' +
                    '                                    </div>\n' +
                    '                                </div>');
            }  else if(data.value == 3) {
                if ($(".inner3").length > 0) {
                    return;
                }
                //搜索结果
                $(".inner1, .inner4, .inner12").remove();
                $(".select-line").remove();

                $("#innerLinkType").after('<div class="layui-form-item inner inner3" id="innerLinkKeyword">\n' +
                    '                                    <label for="" class="layui-form-label"><span style="color: red;">*</span><fmt:message key='ssgjz'/></label>\n' +
                    '                                    <div class="layui-input-inline" style="width: 70%">\n' +
                    '                                        <input class="layui-input" name="innerLinkKeyword"/>\n' +
                    '                                    </div>\n' +
                    '                                </div>');
            } else if(data.value == 4) {
                if ($(".inner4").length > 0) {
                    return;
                }
                //专题
                $(".inner1, .inner3, .inner12").remove();
                $(".select-line").remove();
                $("#innerLinkType").after(' <div class="layui-form-item inner inner4">\n' +
                    '                                    <label for="" class="layui-form-label"></label>\n' +
                    '                                    <div class="layui-input-inline" style="width: 70%">\n' +
                    '                                        <input type="button" class="layui-btn" id="select-subject" value="<fmt:message key='xzzt'/>"/>\n' +
                    '                                        <input type="hidden" id="subjectId" name="subjectId">\n' +
                    '                                        <input type="hidden" id="innerLinkName" name="innerLinkName">\n' +
                    '                                    </div>\n' +
                    '                                </div>');
            } else if(data.value == 12) {
                if ($(".inner12").length > 0) {
                    return;
                }
                //商品类目
                $(".inner1, .inner3, .inner4").remove();
                $(".select-line").remove();
                $("#innerLinkType").after(' <div class="layui-form-item inner inner12">\n' +
                    '                                    <label for="" class="layui-form-label"></label>\n' +
                    '                                    <div class="layui-input-inline" style="width: 70%">\n' +
                    '                                        <input type="button" class="layui-btn" id="select-channel" value="<fmt:message key='xzsplm'/>"/>\n' +
                    '                                        <input type="hidden" id="channelId" name="channelId">\n' +
                    '                                        <input type="hidden" id="innerLinkName" name="innerLinkName">\n' +
                    '                                    </div>\n' +
                    '                                </div>');
            } else {
                $(".inner1, .inner3, .inner4, .inner12").remove();
                $(".select-line").remove();
            }
        });


        form.on('submit(submit)', function (data) {
            if (!data.field.position) {
                layer.msg("<fmt:message key='qxzggwz'/>");
            }
            if (!data.field.innerLinkType) {
                layer.msg("<fmt:message key='qxznllx'/>");
                return false;
            }

            $("#advertis").ajaxSubmit({
                success: function (res) {
                    if (res.status) {
                        layer.alert("<fmt:message key='bccg'/>", function () {
                            parent.location.reload();
                        });
                    } else {
                        layer.alert(res.message);
                    }
                }
            });
        });
    });
</script>
</body>
</fmt:bundle>
</html>